<template>
    <div class="search-result">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :error="error"
            error-text="加载失败，请点击重试">
            <van-cell v-for="(article, index) in list" :key="index" :title="article.title" />
        </van-list>
    </div>
</template>
  
<script>
import { getSearchResult } from '@/api/serach'

export default {
    name: 'searchResult',
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
            page: 1,
            perPage: 20,
            error: false
        }
    },
    methods: {
        async onLoad() {
            try {
                const { data } = await getSearchResult({
                    page: this.page, //页码
                    per_page: this.perPage, //每页大小
                    q: this.searchText  //搜索关键字
                })
                const { results } = data.data
                this.list.push(...results)
                this.loading = false
                if (results.length) {
                    this.page++  //更新下一页数据
                } else {
                    this.finished = true //没有数据了，将加载数据状态关闭
                }
            } catch (err) {
                this.error = true
                this.$toast('数据获取失败，请稍后重试')
            }
        }
    },
    props: {
        searchText: {
            type: String,
            required: true
        }
    }
}
</script>
  
<style lang="less" scoped>

</style>